<template>
      <footer>
      <van-tabbar
      v-model="active"
      active-color="#ff4c4c"
      inactive-color="#bebebe"
      route
      >
        <van-tabbar-item replace to="/home">
          <span>首页</span>
          <template #icon="props">
            <i :src="props" id="ico" class="iconfont icon-shouye"></i>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/film">
          <span>电影</span>
          <template #icon="props">
            <i :src="props" id="ico" class="iconfont icon-dianying"></i>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/cinema">
          <span>影院</span>
          <template #icon="props">
            <i :src="props" class="iconfont icon-yingyuan"></i>
          </template>
        </van-tabbar-item>
        <van-tabbar-item replace to="/my">
          <span>我的</span>
          <template #icon="props">
            <i :src="props" id="ico" class="iconfont icon-wode"></i>
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </footer>
</template>

<script setup>
import { ref } from 'vue';

const active = ref(0);
</script>

<style scoped>
footer{
  width: 100%;
  height: 135px;
  background-color: #fff;
}
</style>
